<template>
    <div class="chaos-fenqu-middle">

        <dianshijuNavigator @goNaciSecond="goNaciSecond"></dianshijuNavigator>

        <div style="width:670px;margin-top:20px;min-height:400px;float:left;">
<!--            <specialRecommendation></specialRecommendation>-->

            <div style="width:670px;margin-top:20px;min-height:174px;float:left;">
                <div style="width:100%;height:45px;margin-top:0px;border-bottom: 1px solid #e5e9ef;float:left;">
                    <h4 style="font-size: 24px;line-height: 24px;font-weight: 400;float:left;color: #222;">日剧</h4>
                </div>

                <template v-show="res.length>0" v-for="(item,i) in res">
                    <div v-bind:style="{'borderRight':i%2==0?'1px solid #e5e9ef':''}"  style="width:calc(50% - 1px);height:150px;border-bottom: 1px solid #e5e9ef;float:left;" v-bind:key="item.videoId">
                        <videoInfo :video-info="item"></videoInfo>
                    </div>
                </template>
            </div>
            <!--這裏加一個分頁-->
            <div style="width:100%;float:left;margin-top:20px;">
                <!--页面底部分页效果-->
                <el-pagination style="margin:0 0 60px 60px;"
                               background
                               layout="total,prev, pager, next"
                               :page-size="12"
                               :total="videoCount"
                               v-show="videoCount>0"
                               :current-page.sync="currentPage"
                               @current-change="handleCurrentChange"
                >
                </el-pagination>
            </div>
        </div>
        <div style="width:324px;margin-top:20px;min-height:400px;float:left;">
            <videoChildPaihang :fenquParent="2" :fenquChild="1" style="float:left;"></videoChildPaihang>
        </div>

    </div>
</template>

<script>
    import reportSecondChild from "@/components/reportSecond/reportSecondChild";
    import videoChildPaihang from "@/components/common/videoChildPaihang";
    import dianshijuNavigator from "@/components/dianshiju/dianshijuNavigator";
    import specialRecommendation from '@/components/common/specialRecommendation'
    import showHoverMaskWithOutCharacters from "@/components/showHoverMaskWithOutCharacters";
    import videoInfo from '@/components/common/videoInfo'


    export default {
        name: "rijuMiddle",
        components:{videoInfo,reportSecondChild,videoChildPaihang,dianshijuNavigator,showHoverMaskWithOutCharacters,specialRecommendation},
        data(){
            return{
                paihangbangForm:{
                    fenquParent:'',
                    fenquChild:'',
                    start:0,
                    pageSize:0
                },
                res:[],
                videoCount:0,
                currentPage:1
            }
        },
        created(){
            var self = this;
            self.paihangbangForm.fenquParent = "02";
            self.paihangbangForm.fenquChild = "01";

            self.$api.get('video-service/videoController/getCountOfVideoByFenquParentAndChild',self.paihangbangForm, result => {
                self.videoCount = result;
                self._searchVideoInfo(1);
            });
        },
        methods:{
            handleCurrentChange(currentPage){
                this._searchVideoInfo(currentPage);
            },
            _searchVideoInfo(currentPage){
                debugger;
                var self = this;
                var totalPage = Math.ceil(self.videoCount/12);
                var start = (currentPage-1)*12;
                var pageSize = 12;
                self.paihangbangForm.start = start;
                self.paihangbangForm.pageSize = pageSize;

                self.$api.get('video-service/videoController/getVideoInfoFenyeByFenquParentAndChild',self.paihangbangForm, result => {
                    self.res = result;
                });
            },
            goNaciSecond(index){
                this.$store.commit('setNavigateSelectIndex', 2);
                if(index==0){
                    this.$router.push('/dianshiju');
                }
                if(index==1){
                    this.$router.push('/riju');
                }

                if(index==2){
                    this.$router.push('/gangju');
                }

                if(index==3){
                    this.$router.push('/guochanju');
                }

            }
        }
    }
</script>

<style scoped>
    .chaos-fenqu-middle{
        width:999px;
        min-height:500px;
        margin:auto auto;
    }
</style>
